<template lang="pug">
  .unitlist
    .industry
      .i-title
        .breadcrumbs 行业列表
        .el-button.el-button--danger(type="danger" @click="goadd()") 添加行业
      .i-content
        table.table
          tr
            th(v-for = "(item,index) in titles" :key="index") {{item}}
          tr(v-for = "(item,i) in list" :id="item.id" :key="i")
            td(width="10%") {{i+1<10?'0'+(i+1):i+1}}
            td(width="40%")
              span.industryName {{item.industryName}}
              input(v-model="item.industryName" style="display:none;text-align:center;" v-on:input="validateIndustry(item.industryName)")
            td(width="35%") {{item.num}}
            td(width="15%")
              .update(v-if="!editable" @click="edit(item.id)") 修改
              .save(style="display:none;"  @click="updateindustry(item.id)") 保存
              .del(@click="del(item.id)") 删除
    .footer
      .m-pagination
        a(href="javascript:;" @click="gotopage(1)") 首页
        a(href="javascript:;" @click="gotopage(pageNow-1)") <
        a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
        a(href="javascript:;" @click="gotopage(pageNow+1)") >
        a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页
    add-industry(:industry="isShow" @refreshList="querylist")
</template>
<script>
  import {mapActions} from 'vuex'
  import addindustry from './addindustry.vue'
  let titles = '序号 行业 行业用户 操作'.split(' ')

  export default {
    name: 'unitlist',
    data() {
      return {
        isShow:false,
        editable:false,
        titles,
        pageNow: 1,
        pageSize: 15,
        list: [],
        total: 0,
        pagecount: 0,
      }
    },
    mounted() {
      this.querylist()
    },
    components:{
      'add-industry':addindustry
    },
    methods: {
      ...mapActions([
        'setcanpaylist',
        'canpayupdade'
      ]),
      test() {
        alert("ss")
        return
      },
      async querylist() {
        let res = await this.$ajax.get(`xyssoManager/industry/queryCorpNumByIndustry?pageNow=${this.pageNow}&pageSize=${this.pageSize}`)
        let data = res.data
        if (data.code == 200) {
          this.list = data.data
          this.total = data.size
          this.pagecount = []
          if (data.pageCount === null) {
            this.pagecount = 1
          } else {
            for(let i=1;i<parseInt(data.pageCount)+1;i++){
              this.pagecount.push(i)
            }
          }
        }
      },
      gotopage(item) {
        if (item > this.pagecount) return
        if (item < 1) return
        this.pageNow = item
        this.querylist()
      },
      goadd() {
        this.isShow=true
        setTimeout(()=>{
          this.isShow = false
        },1000)
      },
      edit(id){
        let $el = document.getElementById(id).getElementsByTagName("td");
        for(let i=0;i<$el.length;i++){
          if($el[i].childNodes[1]){
            $el[i].childNodes[0].style.display='none';
            $el[i].childNodes[1].style.display='inline-block';
          }
        }
      },
      async updateindustry(id){
        let $el = document.getElementById(id).getElementsByTagName("td");
        for(let i=0;i<$el.length;i++){
          if($el[i].childNodes[1]){
            $el[i].childNodes[1].style.display='none';
            $el[i].childNodes[0].style.display='inline-block';
          }
        }
        if(!(this.validateIndustry(document.getElementById(id).getElementsByTagName("td")[1].childNodes[1].value))){
          return
        }
        let list = {
          id:id,
          industryName:document.getElementById(id).getElementsByTagName("td")[1].childNodes[1].value,
        }
        console.log(list)
        let res = await this.$ajax.post('xyssoManager/industry/update',list)
        let data = res.data
        if(data.code==200){
          this.$message.success('修改成功')
          this.$router.push('industrylist')
        }
      },
      async del(id) {
        let res = await this.$ajax.post('xyssoManager/industry/delete', {
          id: id
        })
        let data = res.data
        if (data.code == 200) {
          this.list = this.list.filter(d => d.id != id)
          this.$message.success('删除成功')
        }
      },
      validateIndustry(value) {
        console.log(event);
        let arr = value.split('')
        let reg = /[\u4E00-\u9FA5]/;
        let flag = true
        for (let i = 0; i < arr.length; i++) {
          if (!reg.test(arr[i])) {
            this.$message.success('行业名称必须为中文')
            flag = false
            return
          }
        }
        return flag
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .test
    label
      span
        color red
      > input:checked + span
        color #aaaaaa

  .unitlist
    margin 0 auto
    .industry
      width 100%
      background #fff
      border 1px solid #e0e0e0
      border-radius 5px
      .i-title
        width 100%
        height 70px
        line-height 70px
        border-bottom 1px solid #e0e0e0
        .breadcrumbs
          float left
          margin-left 30px
          font-size 18px
        .el-button
          float right
          margin-right 30px
          height 30px
          line-height 30px
          padding 0 15px
          margin-top 20px
          font-size 12px
      .i-content
        padding 20px 30px 0 30px
        .table
          width 100%
          border-spacing 0
          th
            height 40px
            line-height 40px
            font-size 12px
            color #999999
            text-align center
            background #f5f5f5
            &:nth-child(1)
              width 10%
            &:nth-child(2)
              width 40%
            &:nth-child(3)
              width 35%
            &:nth-child(4)
              width 15%
            &:first-child
              text-align left
              padding-left 20px
            &:last-child
              text-align right
              padding-right 85px
          td
            height 52px
            font-size 14px
            color #686868
            line-height 52px
            border-bottom 1px solid #eee
            text-align center
            box-sizing border-box
            &:nth-child(1)
              width 10%
            &:nth-child(2)
              width 40%
            &:nth-child(3)
              width 35%
            &:nth-child(4)
              width 15%
            &:first-child
              text-align left
              padding-left 26px
            &:last-child
              text-align right
              padding-right 30px
            .update
            .del
            .save
              display inline-block
              width 50px
              text-indent 22px
              cursor pointer
              &.update
                background url('img/update.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #3e478e
              &.del
                background url('img/del.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #e75a46
                margin-left 30px
              &.save
                background url('img/save.png') no-repeat
                background-size 14px 14px
                background-position top 18px left 2px
                color #38418a

    .footer
      margin-top 30px
      .m-pagination
        float right
        font-size 0
        a
          text-decoration none
          display inline-block
          width 32px
          height 32px
          border-radius 5px
          text-align center
          line-height 32px
          margin-right 10px
          font-size 12px
          color #999
          background #fff
          &.active
          &:hover
            background #e75a46
            color #fff
          &:first-of-type
            width 52px
          &:last-of-type
            width 52px
            margin-right 0

</style>


